{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1><i class="bi bi-list-check"></i> 错题列表</h1>
            <a href="{{ url_for('add_mistake') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 添加新错题
            </a>
        </div>
        
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">统计信息</h5>
                <p class="card-text">总共记录错题: <span class="badge bg-primary">{{ mistakes|length }}</span> 道</p>
            </div>
        </div>

        {% if mistakes %}
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            {% for mistake in mistakes|reverse %}
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">题目 #{{ mistake.id }}</h5>
                        <p class="card-text">{{ mistake.question[:100] }}{% if mistake.question|length > 100 %}...{% endif %}</p>
                        <p class="card-text">
                            <small class="text-muted">
                                <i class="bi bi-tags"></i> 知识点: 
                                {% for kp in mistake.get_knowledge_points_list() %}
                                    <span class="badge bg-secondary">{{ kp }}</span>
                                {% endfor %}
                            </small>
                        </p>
                        {% if mistake.exam_type %}
                        <p class="card-text">
                            <small class="text-muted">
                                <i class="bi bi-clipboard-check"></i> {{ mistake.exam_type }}
                            </small>
                        </p>
                        {% endif %}
                        <p class="card-text">
                            <small class="text-muted">
                                <i class="bi bi-calendar"></i> {{ mistake.date.strftime('%Y-%m-%d %H:%M:%S') }}
                            </small>
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="{{ url_for('view_mistake', mistake_id=mistake.id) }}" class="btn btn-primary btn-sm">
                            <i class="bi bi-eye"></i> 查看详情
                        </a>
                        <a href="{{ url_for('edit_mistake', mistake_id=mistake.id) }}" class="btn btn-secondary btn-sm">
                            <i class="bi bi-pencil"></i> 编辑
                        </a>
                        
                        <form action="{{ url_for('delete_mistake', mistake_id=mistake.id) }}" method="POST" 
                              style="display: inline;"
                              onsubmit="return confirm('确定要删除这道错题吗？此操作不可恢复！');">
                            <button type="submit" class="btn btn-danger btn-sm">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-info text-center">
            <h4 class="alert-heading">暂无错题记录</h4>
            <p>您还没有添加任何错题。点击下面的按钮开始添加您的第一道错题。</p>
            <hr>
            <a href="{{ url_for('add_mistake') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 添加第一道错题
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}